<template>
	<view>
		<view class="status_bar">
				<!-- 这里是状态栏 -->
		</view>
		<!-- 图片 -->
		<view v-if="orderInfo.state != 0" style="margin-top: 120rpx;text-align: center;">
			<image src="/static/order/img_zhifuchenggong.png" style="width: 260rpx;height: 237rpx;" mode=""></image>
			<view style="font-size: 36rpx; font-weight: bold;margin-top: 23rpx;">支付成功</view>
			<!-- <view class="u-m-t-68" style="position: relative;">
				<image src="/static/order/img_bg.png" style="width: 565rpx;height: 400rpx;" mode=""></image>
				<view style="position: absolute;top:22%;left:50%; transform: translate(-50%,-50%);font-size: 50rpx;">
					￥{{ orderInfo.actualAmount }}
				</view>
				<view class="bg-content">
					<view class="u-m-b-14">订单编号：{{ orderInfo.tradeNo }}</view>
					<view class="u-m-b-14">下单时间：{{ orderInfo.createdTime }}</view>
					<view class="u-m-b-14">支付方式：{{ payment(orderInfo.paymentMethod) }}</view>
				</view>
			</view> -->
			<view class="u-m-t-68" style="padding: 0 78rpx;height: 400rpx;position: relative;">
				<image src="/static/order/img_bg.png" style="width:100%;height: 100%;" mode=""></image>
				<view style="position: absolute;top:22%;left:50%; transform: translate(-50%,-50%);font-size: 50rpx;">
					￥{{ orderInfo.actualAmount }}
				</view>
				<view class="bg-content">
					<view class="u-m-b-14">订单编号：{{ orderInfo.tradeNo }}</view>
					<view class="u-m-b-14">下单时间：{{ orderInfo.createdTime }}</view>
					<view class="u-m-b-14">支付方式：{{ payment(orderInfo.paymentMethod) }}</view>
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 120rpx;text-align: center;">
			<image src="/static/order/img_yiquxiao.png" style="width: 221rpx;height: 237rpx;" mode=""></image>
			<view style="font-size: 36rpx; font-weight: bold;margin-top: 23rpx;">已取消</view>
		</view>
		<view class="u-flex u-row-center" :style="{marginTop}">
			<view class="u-m-r-60">
				<u-button shape="circle" :ripple="true" hover-calss="none" :hair-line="false" :custom-style="getBtStyle('plain', 200, 80)" @click="toPage">回首页</u-button>
			</view>
			<view>
				<u-button shape="circle" :ripple="true" hover-calss="none" :hair-line="false" :custom-style="getBtStyle('default', 200, 80)" @click="$mRouter.push({ route: '/pages/purchase/order/details?id=' + orderInfo.id })">查看订单</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderStore } from '@/store/order.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				orderInfo: {}
			}
		},
		onLoad(option) {
			this.orderInfo = option
			this.orderInfo.state = Number(this.orderInfo.state)
		},
		computed: {
			marginTop() {
				let marginTop = '50rpx'
				if (this.orderInfo.state == 0) {
					marginTop = '200rpx'
				}
				return marginTop
			},
			...mapState(orderStore, ['paymentMethod'])
		},
		methods: {
			toPage() {
				this.$mRouter.switchTab({ route: '/pages/index/index', success() {
					let page = getCurrentPages().pop();  //跳转页面成功之后
					if (!page) return;  
					page.onLoad(); //如果页面存在，则重新刷新页面
				}})
			},
			payment(value) {
				return this.paymentMethod.find(item => {
					return item.value = value
				}).label
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-content {
		position: absolute;
		text-align: left;
		width: 100%;
		bottom: 15%;
		left: 18%;
		// left: 50%;
		// transform: translateX(-50%);
		// padding-left: 140rpx;
		// padding: 0 auto;
		// transform: translate(-50%,-50%);
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
